﻿<!DOCTYPE html>
<html  style="overflow-x:hidden;overflow-y:hidden;height: 100%;"  lang="en"   ng-app = "myApp" ng-controller="myCtrl"  ng-init="loaddata()">
	<head>
		<meta charset="utf-8" />
		<title>对话</title>
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="shortcut icon" type="image/png" href="img/tubiao.png"/>
		<!---<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">--->
		<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
		<!--<link rel="stylesheet" href="css/font-awesome.css" type="text/css" />-->
		<link rel="stylesheet" href="css/style.css" type="text/css" />
		<!--[if IE]>
		<script src="js/html5.js"></script>
		<![endif]-->
	</head>
	<body  style="background-color:#f8f8f8;overflow-y: hidden;height: 100%;" >

		<!--<div id="page-preloader"><span class="spinner"></span></div>-->
		<!--<header id="header" class="clear">-->
			<!--<a href="index.html" class="logo">Matsumari</a>-->
			<!--<div class="header-right">-->
				<!--<div class="header-search">-->
					<!--<i class="fa fa-search" aria-hidden="true"></i>-->
				<!--</div>-->
			<!--</div>-->
			<!--<nav class="navbar">-->
				<!--<div class="navbar-header">-->
					<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">-->
					<!--<span class="sr-only">Toggle navigation</span>-->
					<!--<span class="icon-bar"></span>-->
					<!--<span class="icon-bar"></span>-->
					<!--<span class="icon-bar"></span>-->
					<!--</button>-->
				<!--</div>-->
				<!--<div id="navbar" class="navbar-collapse collapse">-->
					<!--<ul class="nav navbar-nav menu">-->
						<!--<li class="dropdown"><a href="index.html">Home</a></li>-->
						<!--<li><a href="blog.html">Blog</a></li>-->
						<!--<li><a href="gallery.html">Gallery</a></li>-->
						<!--<li><a href="about_us.html">About Us</a></li>-->
						<!--<li><a href="contacts.html">Contacts</a></li>-->
					<!--</ul>-->
				<!--</div>-->
			<!--</nav>-->
		<!--</header>-->
		<!--&lt;!&ndash; header &ndash;&gt;-->
		<!--<div class="breadcrumbs-wrapper">-->
			<!--<ul class="breadcrumbs">-->
				<!--<li><a href="index.html" class="home"><i class="fa fa-home" aria-hidden="true"></i></a></li>-->
				<!--<li><a>Contacts</a></li>-->
			<!--</ul>-->
		<!--</div>-->
		<!-- breadcrumbs-wrapper -->
		<!--<section class="content-wrapper">-->
			<!--<div class="container">-->
			<!--</div>-->
		<!--</section>-->
				<!--<div class="title">-->
					<!--<h1>Contacts</h1>-->
				<!--</div>-->
				<!--<div class="row">-->
					<!--<div class="col-md-8">-->
						<!--<div class="clear">-->
							<!--<div class="contact-block pic1">-->
								<!--<h5>Meet Us</h5>-->
								<!--<p>Jesper street, Uzbekistan 29 A 33 Avenue</p>-->
							<!--</div>-->
							<!--<div class="contact-block pic2">-->
								<!--<h5>Phone</h5>-->
								<!--<p>8 (800) 222-22-22 <br> 8 (800) 222-22-33</p>-->
							<!--</div>-->
							<!--<div class="contact-block pic3">-->
								<!--<h5>E-mail</h5>-->
								<!--<p>minikeevdesign@gmail.com</p>-->
							<!--</div>-->
							<!--<div class="contact-block pic4">-->
								<!--<h5>Site</h5>-->
								<!--<p><a href="http://namewebsite.com">http://namewebsite.com</a></p>-->
							<!--</div>-->
						<!--</div>-->
						<!--<p><i>Mauris ornare elit sem, eget tempor libero vestibulum id. Curabitur ultrices lacinia convallis. Praesent ac quam at est accumsan aliquam. Cras odio turpis, scelerisque vestibulum maximus eget, suscipit eu nulla. Nullam sodales, tortor eu egestas pharetra, metus sem fermentum lorem, a vestibulum lectus erat eget lorem. Morbi ullamcorper tincidunt lorem sed lacinia. Cras vel pulvinar mauris. Phasellus eget suscipit ex, sed consequat velit. Praesent nec lobortis enim, eget feugiat quam. Praesent quis sollicitudin sem. Proin a elementum urna, vel venenatis quam. Etiam augue turpis, gravida a fringilla id, viverra in lectus. In luctus ipsum vel nunc pharetra, sit amet dictum sapien elementum. Aliquam eu ornare turpis.</i></p>-->
					<!--</div>-->
				<div  style="height: 100%;">
					<div style="width:97%;height: 7%;">
						<!--<h4 onclick="godibu()">{{senderName}} <img style="" src="img/chatpic.png"> {{reciverName}}</h4>-->
						<div style="text-align: center;font-size: 20px;line-height: 20px;" onclick="godibu()">与  {{reciverName}}  的对话</div>
					</div>
					<div  style="width: 100%;height:100%;" class="contact-area">
						<div  id="srollView" style="overflow-x:hidden; height:63%;padding:10px;border:0px solid #eee;" >
							<ul id="ulhtml" style=""></ul>
						</div>
						<!--onclick="javascript:document.getElementById('srollView').scrollIntoView();"-->
						<!--<div class="input-block">-->
							<!--<textarea  style="width: 100%;height: 300px;" readonly="true"></textarea>-->
						<!--</div>-->
						<!--<div style="">-->

						<div style="border:0px solid red;width:100%;height:auto;position: fixed;bottom:0px;">
							<textarea ng-model="mess" placeholder="Message"></textarea>
							<input type="submit" ng-click="sendmsg()" value="Send Message"/>

						</div>
							<!---->

						<!--</div>-->
					</div>
				</div>
				<!--</div>-->
				<!--<div class="map"></div>-->




		<!-- content-wrapper -->
		<!--<footer id="footer">-->
			<!--<div class="container">-->
				<!--<div class="row">-->
					<!--<div class="col-md-4">-->
						<!--<a href="index.html" class="logo">Matsumari</a>-->
						<!--<p>Etiam dictum purus et leo laoreet, vel congue diam pulvinar. Suspendisse elementum dictum lacus id ultricies. In hac habitasse platea dictumst</p>-->
						<!--<div class="copy">Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></div>-->
					<!--</div>-->
					<!--<div class="col-md-3">-->
						<!--<h6>Latest news</h6>-->
						<!--<div class="news-footer">-->
							<!--<a href="blog_inner.html">Praesent ullamcorper sodales</a>-->
							<!--<div class="date">14.11.2016</div>-->
						<!--</div>-->
						<!--<div class="news-footer">-->
							<!--<a href="blog_inner.html">Fusce sollicitudin felis vel</a>-->
							<!--<div class="date">14.11.2016</div>-->
						<!--</div>-->
						<!--<div class="news-footer">-->
							<!--<a href="blog_inner.html">Phasellus vitae dictum urna</a>-->
							<!--<div class="date">14.11.2016</div>-->
						<!--</div>-->
					<!--</div>-->
					<!--<div class="col-md-2">-->
						<!--<h6>Best Posts</h6>-->
						<!--<ul class="footer-menu">-->
							<!--<li><a href="about_us.html">About us</a></li>-->
							<!--<li><a href="">Sitemap</a></li>-->
							<!--<li><a href="contacts.html">Contacts</a></li>-->
							<!--<li><a href="blog.html">Blog</a></li>-->
							<!--<li><a href="gallery.html">Gallery</a></li>-->
						<!--</ul>-->
					<!--</div>-->
					<!--<div class="col-md-3">-->
						<!--<h6>Contacts</h6>-->
						<!--<address>Duis volutpat et magna quis congue. Nullam non velit porta, vulputate odio tempus, volutpat nibh. Mauris dictum dolor non interdum auctor</address>-->
						<!--<div class="footer-phone"><i class="fa fa-phone" aria-hidden="true"></i> +1 (123) 456 78 90</div>-->
					<!--</div>-->
				<!--</div>-->
				<!--<ul class="social">-->
					<!--<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>-->
					<!--<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>-->
					<!--<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>-->
					<!--<li><a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a></li>-->
				<!--</ul>-->
			<!--</div>-->
		<!--</footer>-->
		<!-- footer -->
		<!-- scripts -->

		<div ng-if="ispc" style="z-index:100;border: 0px solid #ccc;width:40px;height: 40px; position:fixed; bottom: 500px;right: 20px;">
			<img  ng-click="returnback()" width="40px" height="40px"  src="img/return.png"/></div>

		<script src="js/lib/jquery-1.10.1.min.js"></script>
		<script src="js/angular/jquery.blockUI.js"></script>
		<script src="js/lib/angular.min.js"></script>

		<script src="js/lib/jquery.js"></script>
		<script src="js/lib/bootstrap.min.js"></script>
		<script src="js/lib/lightbox.min.js"></script>
		<script src="js/lib/shuffle.js"></script>	
		<script src="js/lib/swiper.min.js"></script>
		<script src="js/lib/waypoints.min.js"></script>		
		<script src="js/script.js"></script>

		<script src="js/addressManager.js"></script>

		<script type="text/javascript">


            var senderId = getUrlParam("senderId");
            var reciverId = getUrlParam("reciverId");
            var chatType = getUrlParam("chatType");
            var reciverName = getUrlParam("reciverName");
			function gosay(){
                document.getElementById('srollView').scrollIntoView();

			}
            function godibu(){
                document.getElementById('srollView').scrollTop = document.getElementById('srollView').scrollHeight;
			}

            var app = angular.module("myApp",[]);

            app.controller("myCtrl",function($scope,$http,$timeout, $interval) {
//                $scope.sender = senderId;
                $scope.reciver = reciverId;

                $scope.sendmsg = function () {

                    if($scope.mess==undefined||$scope.mess.isEmpty||$scope.mess==null&&$scope.mess==""){
                        alert("发送内容不能为空");
                        return false;
                    }

                    if($scope.mess.length  > parseInt(150)){
                        alert("字数不要超过150个，你当前字数为："+$scope.mess.length() );
                        return false;
                    }
					console.log($scope.mess.length);
                    if($scope.mess.length <= 0){
                        alert("字数不要低于0个，你当前字数为："+$scope.mess.size );
                        return false;
                    }
                    if(isEmojiCharacter($scope.mess)){
                        alert("不允许表情等等特殊字符！");
                        return false;
					}


                    var sendMsgUrl = "kfk/sendMsg";
					if(chatType=="robot"){
					    sendMsgUrl = "kfk/sendToRobot"

					}

//                    alert(0);
                    $http({
                        method:'POST',
                        url:sendMsgUrl,
                        data: {"senderId":senderId,"reciverId":reciverId,"content":$scope.mess}
                    }).success( function (data){
                        $scope.mess = null;
//						console.log(data.info);
                        if (data.status == "s") {
                            console.log(data.info);
                        }else{
                            alert(data.info);
                        }

                    }).error(function(data, status, headers, config) {});
                }

                //socket通信
                var socket;
                $scope.returnback =function(){
                    //关闭事件
                    socket.close();
                    window.location.href = window.location.href;
                }

                //判断是否已经登录
                $scope.islogin = function () {
                    $http({
                        method:'POST',
                        url:"login/isLogin",
                        data: {}
                    }).success( function (data){
//						console.log(data.info);
                        if (data.status == "s") {
//                            alert(data.info);
                            $scope.senderName = data.info.userName;
                            $scope.reciverName = reciverName;


//                            $scope.logining = true;
//                            $scope.logouting = false;
                        }else{
//                            $scope.logining = false;
//                            $scope.logouting = true;
                        }

                    }).error(function(data, status, headers, config) {});
                }

                $scope.loaddata = function () {

                    $scope.ispc = IsPC() == true ? false : true ;

                    $scope.islogin();
                    //登录时，加载消息
                    if(typeof(WebSocket) == "undefined") {
                        alert("您的浏览器不支持WebSocket");
                        return;
                    }
//                    alert("您的浏览器支持WebSocket");
                    //do something
                    //实现化WebSocket对象，指定要连接的服务器地址与端口
                    socket = new WebSocket(wsAddress+"/websocket");
//                    var senderId = getUrlParam("senderId");
//                    var reciverId = getUrlParam("reciverId");
                    //打开事件
                    socket.onopen = function() {
//                        alert("Socket 已打开");

                        var str = "{senderId:'"+senderId+"',reciverId:'"+reciverId+"',isfirst:'y'}";
                        console.log(str);
                        socket.send(str);
                    };
					//获得消息事件
                    var lastCreateTime = "";
					socket.onmessage = function(msg) {
//						socket.send("你好,我是客户端");

                        var msgdata=eval("("+msg.data+")");
//                        console.log(msgdata);


                        if (msgdata.info.length != 0){
                            lastCreateTime = msgdata.info[msgdata.info.length-1].createTime;
                        }


						for (var i=0;i<msgdata.info.length;i++){
                            var lisay = document.createElement('li'); //1、创建元素
                            var lidate = document.createElement('li'); //1、创建元素

							var divs = document.createElement('div');

                            var divimg = document.createElement('div');

                            var divsay = document.createElement('div'); //1、创建元素
                            var divdate = document.createElement('div'); //1、创建元素
                            var spansay = document.createElement('span'); //1、创建元素
                            var spandate = document.createElement('span'); //1、创建元素
                            var myimg = document.createElement('img'); //1、创建元素
                            var br = document.createElement('br'); //1、创建元素
//                            alert(senderId);
                            spandate.innerHTML=msgdata.info[i].createTime;//msgdata.info[i].senderId
                            spansay.innerHTML=msgdata.info[i].content;

                            spandate.setAttribute("style","color:#ccc;");
                            divdate.setAttribute("style","text-align:center;height:10px;");
                            divdate.appendChild(spandate);

                            myimg.setAttribute("src",msgdata.info[i].userImg);
//                            lisay.setAttribute("style","margin-top:50px;");

//                            console.log(webAddress+msgdata.info[i].userImg);
                            if(senderId==msgdata.info[i].senderId){

                                divs.setAttribute("style","height:auto;text-align:right;")

                                divsay.setAttribute("style","height:auto;width:90%;float:right;");
                                spansay.setAttribute("style","margin-top:20px;margin-bottom:20px;height:auto;float:right;display:block;padding:10px;border-radius:10%;background-color:#d2f0f9;border:1px solid #eee;");
                                divsay.appendChild(spansay);

                                myimg.setAttribute("style","margin-top:20px;margin-bottom:20px;margin-left:5px;width:25px;height:25px;border-radius:50%;");
                                divimg.setAttribute("style","width:30px;float:right;");
                                divimg.appendChild(myimg);

							}else{

                                divs.setAttribute("style","height:auto;text-align:left;")

                                divsay.setAttribute("style","height:auto;width:90%;float:left;");
                                spansay.setAttribute("style","margin-top:20px;margin-bottom:20px;height:auto;float:left;display:block;padding:10px;border-radius:10%;background-color:#ffc0c3;border:1px solid #eee;");
                                divsay.appendChild(spansay);

                                myimg.setAttribute("style","margin-top:20px;margin-bottom:20px;margin-right:5px;width:25px;height:25px;border-radius:50%;");
                                divimg.setAttribute("style","width:30px;float:left;");
                                divimg.appendChild(myimg);

							}

                            divs.appendChild(divimg);
                            divs.appendChild(divsay);


                            lidate.appendChild(divdate);
                            lisay.appendChild(divs);


							document.getElementById('ulhtml').appendChild(lidate);
                            document.getElementById('ulhtml').appendChild(br);
                            document.getElementById('ulhtml').appendChild(lisay);
                            document.getElementById('ulhtml').appendChild(br);
//                            document.getElementById('srollView').scrollIntoView();
//                            scrollTop=scrollHeight
//                            var div = document.getElementById("srollView");
                            document.getElementById('srollView').scrollTop = document.getElementById('srollView').scrollHeight;


						}
						var str = "{senderId:'"+senderId+"',reciverId:'"+reciverId+"',createTime:'"+lastCreateTime+"',isfirst:'n'}";
						socket.send(str);

					};
					//关闭事件
					socket.onclose = function() {
//						alert("Socket已关闭");
						console.log("Socket已关闭")
					};
					//发生了错误事件
					socket.onerror = function(msg) {
						alert("发生了错误");
						console.log(msg)
					};
            	}
            });


            //获取地址栏参数//只能是英文参数
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }

            //            第二种：参数可以是中文也可以是英文

            //获取地址栏参数//可以是中文参数
            function getUrlParam(key) {
                // 获取参数
                var url = window.location.search;
                // 正则筛选地址栏
                var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
                // 匹配目标参数
                var result = url.substr(1).match(reg);
                //返回参数值
                return result ? decodeURIComponent(result[2]) : null;
            }


			//判断是否客户端是否为手机，返回false，则为电脑端
            function IsPC() {
                var userAgentInfo = navigator.userAgent;
                var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            }


            //判断是否有表情图片
            function isEmojiCharacter(substring) {

                if (substring==null&&substring==""){
                    alert("发送内容不能为空");
                    return true;
				}
                for ( var i = 0; i < substring.length; i++) {
                    var hs = substring.charCodeAt(i);
                    if (0xd800 <= hs && hs <= 0xdbff) {
                        if (substring.length > 1) {
                            var ls = substring.charCodeAt(i + 1);
                            var uc = ((hs - 0xd800) * 0x400) + (ls - 0xdc00) + 0x10000;
                            if (0x1d000 <= uc && uc <= 0x1f77f) {
                                return true;
                            }
                        }
                    } else if (substring.length > 1) {
                        var ls = substring.charCodeAt(i + 1);
                        if (ls == 0x20e3) {
                            return true;
                        }
                    } else {
                        if (0x2100 <= hs && hs <= 0x27ff) {
                            return true;
                        } else if (0x2B05 <= hs && hs <= 0x2b07) {
                            return true;
                        } else if (0x2934 <= hs && hs <= 0x2935) {
                            return true;
                        } else if (0x3297 <= hs && hs <= 0x3299) {
                            return true;
                        } else if (hs == 0xa9 || hs == 0xae || hs == 0x303d || hs == 0x3030
                            || hs == 0x2b55 || hs == 0x2b1c || hs == 0x2b1b
                            || hs == 0x2b50) {
                            return true;
                        }
                    }
                }
            }
		</script>
	</body>
</html>
